iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 2
0
自我挑戰組

從零開始學JavaScript系列 第 2

【02】宣告變數注意重點

  • 分享至 

  • xImage
  •  

宣告變數之方式

  • const : 通常用來宣告常數,例如 :
    const PI = 3.14159; //宣告PI
    
  • var : JavaScript在ES6推出之前的基本宣告方式,例如 :
    var temp = 100; //將變數temp賦予值,其值為數字100
    
  • var : JavaScript在ES6後新增的宣告方式,作用與var類似 :
    let abc = "apple"; //將變數abc賦予值,其值為字串apple
    

宣告方式之差別

  • var
    在ES6之前,所有變數都是由var去宣告,但這也引發三個大問題 :

    • 語法允許重複宣告

      var a = 1;
      var a = 2;
      console.log(a); //顯示2
      

      透過上述程式碼可知,var是允許重複宣告的,並不會跳出任何錯誤或警告,很容易忽略自己曾宣告過,進而產生小型Bug。

    • 不支援區塊作用域

      for(var i=0; i<3; i++){
          console.log(i,"Hi");
          // 依次出現 0 "Hi"、1 "Hi"、2 "Hi"
          }
      
      console.log(i);// 出現3
      

      透過上述程式碼可知,i其實被設為全域變數,而區塊語句(if、else、for、while等)卻會汙染i。而引發這一切的原因,正是因為JavaScript在ES6前並未有區塊域(Bolck)的概念。

    • 不支援常數特性

      var PI = 3.14;
      console.log(PI);//顯示3.14
      PI = 1234;
      console.log(PI);//顯示1234
      

      PI為常數,本身是無法更改的,但var語法允許重複宣告的特性,如果PI在程式某個小角落被誤改,就會造成整體運算結果的錯誤。總結來說,var並不能保護常數性質的變數。

  • let

    禁止同一層區塊域(Block)重複宣告變數,例如 :

    let a = 1;
    let a = 2;
    console.log(a); //Error,原因是a已經重複宣告過
    

    但如果分層宣告就不會彼此衝突,例如 :

    let a = 1; // 此為全域變數
    function tmp(){
        let a = 2; //此為區域變數
        console.log(a);
    }
    tmp(); //顯示2
    
    console.log(a); //顯示1
    
  • const

    const 可以視為 let 的常數加強版,擁有let的性質,例如 :

    const a = 1;
    const a = 2;
    console.log(a); //Error,原因是a已經重複宣告過
    

    const同時也能保護常數性質的變數,使其一旦給值後,就無法重新賦值,例如 :

    const a = 1;
    a = 2;
    console.log(a); //Error,原因是a不能重新給予值
    

總結

  1. var

    • 可能會汙染全域變數
    • 可以重複宣告
  2. let

    • 所宣告的變數只有在區域塊(Block)內有效,不會產生全域變數
    • 無法在同一層 Block 重複宣告變數
  3. const

    • 具備 let 所有的特性。
    • 在一宣告時就必定要指定給值,不然會產生錯誤
    • 宣告後不能更改值
  4. 往後只要碰到ES6之後的專案,都建議使用"const"或者"let"嚴比較嚴謹的宣告變數而非"var",除了讓開發的專案更加穩定外,也可以增加程式碼的可讀性。


參考與引用來源

  1. https://medium.com/coding-girl-life/js-var-let-const-ef9895b4773b
  2. https://ithelp.ithome.com.tw/articles/10203548
  3. https://medium.com/@totoroLiu/javascript-var-let-const-%E5%B7%AE%E7%95%B0-e3d930521230

上一篇
【01】Node.js預先安裝
下一篇
【03】基礎解題練習
系列文
從零開始學JavaScript24
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言